<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="CSS/base.css">
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="CSS/main.css">
</head>

<body>
    <!-- 头部区域 -->
    <div class="rows">
        <div class="rows-left">
            <img src="images/logomain.png" alt="">
            <span class="rows-left-title">国家材料基因工程数据汇交与管理服务技术平台</span>
        </div>
        <div class="col-sm-4">
            <ul>
                <li>
                    <a href="#">联系我们</a>
                </li>
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <img src="images/头像.jfif" alt="" class="userpic">
                </li>
                <li>
                    <a href="#" class="username">童凯程
                        <span class="glyphicon glyphicon-triangle-bottom"></span>
                    </a>
                </li>
            </ul>
            <div class="hidemenu">
                <span class="glyphicon glyphicon-paperclip">
                    <a href="#">个人信息</a>
                </span>
                <span class="glyphicon glyphicon-off">
                    <a href="#">退出系统</a>
                </span>
            </div>
        </div>
    </div>
    <!-- 中间部分 -->
    <div class="middle">
        <!-- 头部下方图片区域 -->
        <img src="images/header3.png" alt="" class="row-img">
        <!-- 功能选择区域 -->
        <div class="functionnav">
            <ul>
                <li>
                    <img src="images/项目汇交.png" alt="">
                    <span>项目汇交</span>
                </li>
                <li>
                    <img src="images/专家验收.png" alt="">
                    <span>专家验收</span>
                </li>
                <li>
                    <img src="images/数据检索.png" alt="">
                    <span>数据检索</span>
                </li>
                <li>
                    <img src="images/应用案例.png" alt="">
                    <span>应用案例</span>
                </li>
            </ul>
        </div>
        <div class="middle-title">
            <h4>项目汇交</h4>
            <hr style="height: 1px;width: 100%;background: #aaa;margin: 0px;">
        </div>
        <div class="projects" style="display:block">
            <ul>
                <li>
                    <a href="#">离散数据汇交</a>
                </li>
                <li>
                    <a href="#">高通量数据汇交</a>
                </li>
                <li>
                    <a href="#">关系型数据库数据汇交</a>
                </li>
                <li>
                    <a href="#">大科学装置实验数据汇交</a>
                </li>
                <li>
                    <a href="#">数据统计</a>
                </li>
                <li>
                    <a href="#">数据审核</a>
                </li>
            </ul>
        </div>
        <div class="projects">
            <ul>
                <li>
                    <a href="#">项目信息管理</a>
                </li>
                <li>
                    <a href="#">申请汇交证明</a>
                </li>
                <li>
                    <a href="#">申请汇交验收</a>
                </li>
                <li>
                    <a href="#">汇交验收分配</a>
                </li>
                <li>
                    <a href="#">汇交验收评价</a>
                </li>
            </ul>
        </div>
        <div class="projects">
            <ul>
                <li>
                    <a href="#">普通检索</a>
                </li>
                <li>
                    <a href="#">智能检索</a>
                </li>
                <li>
                    <a href="#">高级检索</a>
                </li>
            </ul>
        </div>
        <div class="projects projects4">
            <ul>
                <li>
                    <a href="#">生物医用材料基因组学数据挖掘计算流程</a>
                </li>
                <li>
                    <a href="#">材料基因组缺陷算法</a>
                </li>
                <li>
                    <a href="#">基于晶格反演的机器学习势函数算法</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 底部模块 -->
    <div class="row footer" style="text-align: left; ">
        <div class="col-sm-3" style="border-left: 2px solid #FFF;margin: 30px;">
            <div style="font-size: 16px;font-weight: bold;margin-bottom: 10px;color: #FFF;">平台承建单位</div>
            <div style="font-size: 13px;color: #FFF;">
                北京科技大学&nbsp;&nbsp;|&nbsp;&nbsp;中国科学院宁波材料技术与工程研究所&nbsp;&nbsp;|&nbsp;&nbsp;天津南大通用数据技术股份有限公司&nbsp;&nbsp;|&nbsp;&nbsp;中国科学院数学与系统科学研究院&nbsp;&nbsp;|&nbsp;&nbsp; 北京市计算中心&nbsp;&nbsp;|&nbsp;&nbsp;中国科学院计算机网络信息中心&nbsp;&nbsp;|&nbsp;&nbsp;中国科学院高能物理研究所&nbsp;&nbsp;|&nbsp;&nbsp;国家超级计算天津中心&nbsp;&nbsp;|&nbsp;&nbsp;四川大学&nbsp;&nbsp;|&nbsp;&nbsp;
                清华大学
            </div>
        </div>

        <div class="col-sm-6" style="border-left: 2px solid #FFF;margin: 30px;">
            <div style="font-size: 16px;font-weight: bold;margin-bottom: 10px;color: #FFF;">数据汇交单位</div>
            <div style="font-size: 13px;color: #FFF;">
                北京科技大学&nbsp;&nbsp;|&nbsp;&nbsp;清华大学&nbsp;&nbsp;|&nbsp;&nbsp;哈尔滨工程大学&nbsp;&nbsp;|&nbsp;&nbsp;中国科学院上海硅酸盐研究所&nbsp;&nbsp;|&nbsp;&nbsp; 中南大学&nbsp;&nbsp;|&nbsp;&nbsp;重庆大学&nbsp;&nbsp;|&nbsp;&nbsp;北京大学&nbsp;&nbsp;|&nbsp;&nbsp;北京计算科学研究中心&nbsp;&nbsp;|&nbsp;&nbsp;四川大学&nbsp;&nbsp;|&nbsp;&nbsp;
                中国科学院宁波材料技术与工程研究所&nbsp;&nbsp;|&nbsp;&nbsp;中国科学院福建物质结构研究所&nbsp;&nbsp;|&nbsp;&nbsp;吉林大学&nbsp;&nbsp;|&nbsp;&nbsp; 上海交通大学&nbsp;&nbsp;|&nbsp;&nbsp;中国科学院金属研究所&nbsp;&nbsp;|&nbsp;&nbsp;中国航发北京航空材料研究院&nbsp;&nbsp;|&nbsp;&nbsp;上海大学&nbsp;&nbsp;|&nbsp;&nbsp;
                北京航空航天大学&nbsp;&nbsp;|&nbsp;&nbsp;中国科学院力学研究所&nbsp;&nbsp;|&nbsp;&nbsp;苏州热工研究院有限公司&nbsp;&nbsp;|&nbsp;&nbsp;中国工程物理研究院材料研究所&nbsp;&nbsp;|&nbsp;&nbsp; 浙江大学&nbsp;&nbsp;|&nbsp;&nbsp;南京大学&nbsp;&nbsp;|&nbsp;&nbsp;中国石油化工集团公司&nbsp;&nbsp;|&nbsp;&nbsp;中国航空工业集团公司基础技术研究院&nbsp;&nbsp;|&nbsp;&nbsp;
                天津大学&nbsp;&nbsp;|&nbsp;&nbsp;西北工业大学&nbsp;&nbsp;|&nbsp;&nbsp;国家超级计算天津中心&nbsp;&nbsp;|&nbsp;&nbsp;湖南大学等单位
            </div>
        </div>
    </div>

    <div class="row footer" style="text-align:center;padding: 5px; ">
        <div class="col-sm-12">
            <!--<span style="font-size: 14px;color: #FFF;">常用工具</span>-->
            <span style="font-size: 14px;color: #FFF;">
                <!--About MGED &nbsp;&nbsp; | &nbsp;&nbsp; Team &nbsp;&nbsp; |  &nbsp;&nbsp; API-->
                <a href="#" style="text-decoration: underline;margin-right: 5px;color: #FFF">离散数据汇交客户端下载</a> |
                <a href="http://10.0.15.180/api/oauth/gbase?token=" id="shujuguanUrl" target="_blank" style="text-decoration: underline;margin-right: 5px;color: #FFF">数据可视化</a> |
                <a style="text-decoration: underline;margin-right: 5px;color: #FFF">NMDMS数据汇交平台常见问题</a>
            </span>
        </div>
    </div>
    <div class="row footer" style="text-align: center; padding: 5px;">
        <div class="col-sm-12">
            <span style="font-size: 15px;color: #FFF;">版权所有ⓒ</span>
            <span style="font-size: 15px;color: #4e98e4;">国家材料基因工程数据汇交与管理服务平台</span>
            <!--<span style="font-size: 15px;color: #FFF;">京ICP备18024411号</span>-->
        </div>
    </div>
    <script>
        var btn = document.getElementsByClassName('username');
        var menu = document.getElementsByClassName('hidemenu');
        btn[0].addEventListener('mousedown', function() {
            if (menu[0].style.display === 'none') {
                menu[0].style.display = 'block';
            } else {
                menu[0].style.display = 'none';
            }
        })

        var tablist = document.querySelector('.functionnav');
        var lis = tablist.querySelectorAll('li');
        var items = document.querySelectorAll('.projects');
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i); //给每个小li加上索引
            lis[i].onclick = function() {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].style.backgroundColor = '#eeeeee'
                    this.style.backgroundColor = '#ddeaed';
                }

                // 2. 下面的显示内容模块
                var index = this.getAttribute('index'); //获得这个小li的索引
                // console.log(index);
                // 干掉所有人 让其余的item 这些div 隐藏
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                // 留下我自己 让对应的item 显示出来
                items[index].style.display = 'block';
            }
        }
    </script>
</body>

</html>